<template>
  <div class="main">
    <div class="header">
      <el-button type="primary" round @click="waitOrder">未接取</el-button>
      <el-button type="success" round @click="progressOrder">派送中</el-button>
      <el-button type="warning" round @click="finishOrder">已到达</el-button>
      <el-button type="danger" round @click="evaluateOrder">已评价</el-button>
    </div>
    <div class="content">
      <el-table :data="tableData" v-loading="loading">
        <el-table-column label="订单号" prop="orderId"></el-table-column>
        <el-table-column label="餐品名" prop="dishName"></el-table-column>
        <el-table-column label="单价" prop="dishPrice"></el-table-column>
        <el-table-column label="数量" prop="quantity"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" v-show="status === 3"
                       @click="toEvaluate(scope.row.dishId, scope.row.restaurantId, scope.row.stafferId)">评价
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
        title="评论"
        :visible.sync="dialogVisible"
        width="60%">
      <div class="dialog-wrap">
        <div class="rate-wrap">
          <span class="font">美食评价</span>
          <el-rate class="rate" v-model="dishScore"></el-rate>
        </div>
        <el-input class="input" v-model="dishDescription" type="textarea"></el-input>
      </div>
      <div class="dialog-wrap">
        <div class="rate-wrap">
          <span class="font">餐馆评价</span>
          <el-rate class="rate" v-model="restaurantScore"></el-rate>
        </div>
        <el-input class="input" v-model="restaurantDescription" type="textarea"></el-input>
      </div>
      <div class="dialog-wrap">
        <div class="rate-wrap">
          <span class="font">送餐员评价</span>
          <el-rate class="rate" v-model="stafferScore"></el-rate>
        </div>
        <el-input class="input" v-model="stafferDescription" type="textarea"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitEvaluation">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getEvaluateOrder, getFinishOrder, getProgressOrder, getWaitOrder} from "@/http/api/user";
import cookie from "js-cookie";
import {AddDishEvaluation, AddRestaurantEvaluation, AddStafferEvaluation} from "@/http/api/evaluation";

export default {
  name: "Order",
  data() {
    return {

      // 表格数据
      tableData: [],

      status: 1,

      loading: false,

      dialogVisible: false,

      // 用户评价
      dishId: '',
      dishScore: 5,
      dishDescription: '',

      // 餐馆评价
      restaurantId: '',
      restaurantScore: 5,
      restaurantDescription: '',

      // 送餐员评价
      stafferId: '',
      stafferScore: 5,
      stafferDescription: '',
    }
  },
  methods: {
    // 获取待接取订单
    async waitOrder() {
      this.loading = true
      this.status = 1
      let result = await getWaitOrder({
        userId: cookie.get('userId')
      })
      if (result.code === 0) {
        this.tableData = result.data
      } else {
        this.$message.warning(result.message)
      }
      this.loading = false
    },

    // 获取进行中订单
    async progressOrder() {
      this.loading = true
      this.status = 2
      let result = await getProgressOrder({
        userId: cookie.get('userId')
      })
      if (result.code === 0) {
        this.tableData = result.data
      } else {
        this.$message.warning(result.message)
      }
      this.loading = false
    },

    // 获取已完成订单
    async finishOrder() {
      this.loading = true
      this.status = 3
      let result = await getFinishOrder({
        userId: cookie.get('userId')
      })
      if (result.code === 0) {
        this.tableData = result.data
      } else {
        this.$message.warning(result.message)
      }
      this.loading = false
    },

    // 获取已评价订单
    async evaluateOrder() {
      this.loading = true
      this.status = 4
      let result = await getEvaluateOrder({
        userId: cookie.get('userId')
      })
      if (result.code === 0) {
        this.tableData = result.data
      } else {
        this.$message.warning(result.message)
      }
      this.loading = false
    },

    // 评价餐品
    toEvaluate(dishId, restaurantId, stafferId) {
      this.dialogVisible = true
      this.dishId = dishId
      this.restaurantId = restaurantId
      this.stafferId = stafferId
    },

    // 提交评价
    async commitEvaluation(){
      this.dialogVisible = false

      let result1 = await AddDishEvaluation({
        userId: cookie.get('userId'),
        dishId: this.dishId,
        score: this.dishScore,
        description: this.dishDescription,
      })
      if (result1.code === 0){
        this.$message.success('餐品评价成功')
      }

      let result2 = await AddRestaurantEvaluation({
        userId: cookie.get('userId'),
        restaurantId: this.restaurantId,
        score: this.restaurantScore,
        description: this.restaurantDescription,
      })
      if ( result2.code === 0){
        this.$message.success('餐馆评价成功')
      }

      let result3 = await AddStafferEvaluation({
        userId: cookie.get('userId'),
        stafferId: this.stafferId,
        score: this.stafferScore,
        description: this.stafferDescription,
      })

      if (result3.code === 0){
        this.$message.success('员工评价成功')
      }

      // 刷新列表
      await this.finishOrder()
    },
  }
}
</script>

<style lang="less" scoped>
.main {
  .header {
    margin-bottom: 20px;
  }
  .dialog-wrap {
    padding-bottom: 30px;
    .rate-wrap {
      width: 200px;
      padding-bottom: 30px;
      .font {
        font-size: 16px;
        float: left;
      }
      .rate {
        float: right;
      }
    }
    .input {
      font-family: "PingFang SC",serif;
      font-size: 15px;
    }
  }

}
</style>